這篇只是串接看起來可以，我還沒有在正式環境使用過，僅作為參考

前往老地方 Theme File Editor>Theme Functions

貼上從 TapPay 複製稍微修改的程式碼

function TapPay_AP() {
    ?>
    <!-- Your provided HTML, CSS and JS goes here -->
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://js.tappaysdk.com/sdk/tpdirect/v5.17.0"></script>

    <style>
        .ui.meesage {
            transition: all .5s ease
        }
        .container {
            text-align: center;
        }
		.column {
			display: flex;
			flex-direction: column;
			margin: 2vh 2em 2vh 2em;
			justify-content: center;
			align-items: center;
		}
		#pr-button {
			position: relative;
			max-width: 300px;
			height: 40px;
		}
		#pr-button > div {
			padding: 0 8vw 0 8vw;
			-apple-pay-button-style: white;
		}

        .ui.grid.container {
            padding-top: 42px;
        }
        pre {
            overflow-x: auto;
            text-align: left;
        }
        .hidden {
            display: none;
        }
		
		.apple-pay-button {
			display: inline-block;
			-webkit-appearance: -apple-pay-button;
			-apple-pay-button-type: donate; /* Use any supported button type. */
		}
		.apple-pay-button-white {
			-apple-pay-button-style: white;
		}
        .apple-pay-button-black {
			-apple-pay-button-style: black;
		}
		
		.payment-divider {
			display: flex;
			align-items: center;
			text-align: center;
			width: 100%;
			font-family: 'Readex Pro', sans-serif;
			font-size: 14px;
			font-weight: 400;
			padding: 10px 3em 10px 3em;
			color: #a0a0a0;
		}
		.payment-divider:before,
		.payment-divider:after {
			content: '';
			flex: 1;
			border-bottom: 1px solid #a0a0a0;  /* Change this to set the line color */
			margin: 16px 0 16px 0;
		}
		.payment-divider:before {
			margin-right: 1em;
		}
		.payment-divider:after {
			margin-left: 1em;
		}
    </style>

	<div class="column">
		<div id="pr-button"></div>
		<div class="ui negative message hidden" id="browser-no-support-message">
			<div class="header">瀏覽器不支援 PaymentRequest</div>
		</div>

		<div class="ui negative message hidden get-prime-status" id="get-prime-failed-message">
			<div class="header">get prime failed</div>
			<p></p>
		</div>

		<div class="ui success message hidden get-prime-status" id="get-prime-success-message">
			<div class="header">get prime success</div>
			<p></p>
		</div>

		<div class="hidden" id="get-prime-result">
			<h2 class="ui top attached header">getPrimeResult</h5>
			<div class="ui buttom attached segment">
				<pre><code></code></pre>
			</div>
		</div>

		<div class="hidden" id="curl">
			<h2 class="ui top attached header">Use following data to send to server.</h5>
			<div class="ui buttom attached segment">
				<pre><code></code></pre>
			</div>
		</div>

	</div>

	<div id="payment-divider" class="payment-divider">
		<span>Or pay by card/cash</span>
	</div>

    <script>
        var data = {
            supportedNetworks: ['MASTERCARD', 'DISCOVER', 'VISA'],
            supportedMethods: ['card', 'pay_with_google', 'apple_pay'],
            displayItems: [{
                label: 'iPhone8',
                amount: {
                    currency: 'TWD',
                    value: '1.00'
                }
            }],
            total: {
                label: '付給 TapPay',
                amount: {
                    currency: 'TWD',
                    value: '1.00'
                }
            },
            shippingOptions: [{
                    id: "standard",
                    label: "🚛 Ground Shipping (2 days)",
                    // apple pay only
                    detail: 'Estimated delivery time: 2 days',
                    amount: {
                        currency: "TWD",
                        value: "5.00"
                    }
                },
                {
                    id: "drone",
                    label: "🚀 Drone Express (2 hours)",
                    // apple pay only
                    detail: 'Estimated delivery time: 2 hours',
                    amount: {
                        currency: "TWD",
                        value: "25.00"
                    }
                },
            ],
            // optional
            options: {
                requestPayerEmail: false,
                requestPayerName: false,
                requestPayerPhone: false,
                requestShipping: false,
                shippingType: 'shipping'
            }
        }

        TPDirect.setupSDK(11327, '<?php echo TAPPAY_API_KEY; ?>', 'sandbox')
        
        TPDirect.paymentRequestApi.setupApplePay({
            // required, your apple merchant id
            merchantIdentifier: 'merchant.tech.cherri.global.test',
            // defaults to 'TW'
            countryCode: 'TW'
        })
        TPDirect.paymentRequestApi.setupPayWithGoogle({
            // defaults to ['CARD', 'TOKENIZED_CARD']
            allowedPaymentMethods: ['CARD', 'TOKENIZED_CARD'],

            // Indicates whether or not you allow prepaid debit cards as a form of payment.
            // Set to true to allow prepaid debit cards. Otherwise, set to false.
            // defaults to true
            allowPrepaidCards: true,

            // defaults to false
            billingAddressRequired: false,
            // defaults to  'MIN'
            billingAddressFormat: 'MIN', // FULL, MIN

            // Set the ISO 3166-1 alpha-2 formatted country codes of the countries to which shipping is allowed.
            // If not specified, all countries are allowed.
            // defaults to undefined (allow all shipping address)
            // allowedCountryCodes: ['TW']
        })
        TPDirect.paymentRequestApi.setupPaymentRequest(data, function (result) {
            // result.browserSupportPaymentRequest
            // result.canMakePaymentWithActiveCard
            if (!result.browserSupportPaymentRequest) {
                $('#pr-button, #payment-divider').addClass('hidden')
                $('#browser-no-support-message').removeClass('hidden')
				$('#browser-no-support-message').css('margin-bottom', '40px');
                return
            }
            TPDirect.paymentRequestApi.setupTappayPaymentButton('#pr-button', (getPrimeResult) => {
                $('#get-prime-result').removeClass('hidden')
                $('#get-prime-result pre code').text(JSON.stringify(getPrimeResult, null, 2))
                $('.get-prime-status').addClass('hidden')
                console.log(getPrimeResult)
                if (getPrimeResult.status !== 0) {
                    console.log('getPrime failed: ' + getPrimeResult.msg)
                    $('#get-prime-failed-message').removeClass('hidden')
					alert(JSON.stringify(getPrimeResult, null, 2))
                    return
                }
				alert(JSON.stringify(getPrimeResult, null, 2))
                // send prime to server
                console.log('prime: ' + getPrimeResult.prime)
                $('#get-prime-success-message').removeClass('hidden')
                $('#get-prime-success-message p').text(getPrimeResult.prime)

                var command = `
                curl -X POST https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime \\
                -H 'content-type: application/json' \\
                -H 'x-api-key: partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM' \\
                -d '{
                    "partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
                    "prime": "${getPrimeResult.prime}",
                    "amount": "${parseInt(getPrimeResult.total_amount)}",
                    "merchant_id": "GlobalTesting_CTBC",
                    "details": "Some item",
                    "cardholder": {
                        "phone_number": "${getPrimeResult.payer.phone || ''} ",
                        "name": "${getPrimeResult.payer.name || ''}",
                        "email": "${getPrimeResult.payer.email || ''}",
                        "zip_code": "123",
                        "address": "台北市天龍區芝麻街1號1樓",
                        "national_id": "A123456789"
                    }
                }'`.replace(/                /g, '')

                $('#curl').removeClass('hidden')
                $('#curl pre code').text(command)
				alert(command)
            })
        })
	</script>

    <?php
}
add_action('woocommerce_checkout_before_customer_details', 'TapPay_AP');

如果之前沒有把 Testing API Key 放到後端，請記得把 TPDirect.setupSDK 替換為 (11327, 'app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC', 'sandbox')，不然會出現 Undefined。

會出現這個，意思是你還沒有向 Apple 登記這個網址，所以應該是代表可以使用，只差把網站申請起來！（就是 Apple Developer 帳戶）如果透過 TapPay 的話一個月只要 200，比 USD99 便宜了不少～

更換 Apple Pay Button 顏色

很簡單，只要在剛剛的程式碼中的 CSS（）找到 #pr-button > div {，把裡面的 -apple-pay-button-style: white; 註解掉即可

		#pr-button > div {
			padding: 0 8vw 0 8vw;
			/*-apple-pay-button-style: white;*/
		}

會用白色是因為我主要的網站是深色背景，所以加了把 Apple Pay Button 變為白色的程式碼，原本預設的就是黑色的！

這個 #pr-button 是指定 id=pr-button 的那個 <>，然後 > div 是指定 pr-button 中的 （在 CSS 中是一個通用内容流容器，把它當作一個盒子就好，這個盒子就是專門裝 Apple Pay 按鈕的（如果 Javascript 確認網站可以使用）。沒有的話會連 Or pay by card/cash 的分隔線都沒有（這個也是我自己加的：

	<div id="payment-divider" class="payment-divider">
		<span>Or pay by card/cash</span>
	</div>

祝各位順利！